<template>
    <div :class="['card', className]">
        <div class="desc">
            <div>{{ item.type }}</div>
            <div :class="[item.proportion > 0 ? 'add' : item.proportion === 0 ? 'normal' : 'lessen']">
                {{ item.proportion.toFixed(2) + '%' }}
            </div>
        </div>
        <div class="card-body">
            <div class="card-title">
                <div class="card-data">{{ item.data }}</div>
                <div class="card-daily-data">今日{{ getDailyText(item.dailyData) }}</div>
            </div>
            <div class="img-wrapper">
                <img class="img" v-if="item.dailyData > 0" src="../assets/bottom.png" alt="" />
                <img class="img" v-else src="../assets/top.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script setup>
const {item, className} = defineProps({
    className: {
        type: String,
        default: '',
    },
    item: {
        type: Object,
        default: () => {},
        required: true,
    },
});

const getDailyText = item => (item < 0 ? item : `+${item}`);
</script>

<style scoped lang="css">
.card {
    border-radius: 6px;
    border: 1px solid #e8e9eb;
    padding: 12px;
    min-width: 185px;
    box-sizing: border-box;
    .add {
        color: #f33e3e !important;
    }
    .normal {
        color: #2468f2 !important;
    }
    .lessen {
        color: #30bf13 !important;
    }
    .desc {
        height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: #84868c;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;

        .card-title {
            display: flex;
            flex-direction: column;
            .card-data {
                height: 34px;
                font-size: 24px;
                font-weight: bold;
                color: #151b26;
                line-height: 34px;
            }
            .card-daily-data {
                margin-top: 8px;
                height: 22px;
                font-size: 14px;
                font-weight: 400;
                color: #84868c;
                line-height: 22px;
            }
        }
        .img-wrapper,
        .img {
            width: 55px;
            height: 45px;
            display: block;
        }
    }
}
</style>
